<template>
	<view class="">
		<view class="kuang">
			<u-tabs :list="list1" :current="current" @click="click"></u-tabs>
		</view>
		<view class="kuang" v-for="item in list" @click="details(item.id)">
			<view class="one fl_ju">
				<view class="">
					<text class="staer">{{item.pickupMethod==0?'自提':'外卖'}}</text>
					<text class="bianhao">订单号:{{item.orderNo}}</text>
				</view>
				<block v-for="itema in status">
					<view class="type" v-if="item.orderStatus==itema.value">
						<text>{{itema.title}}</text>
					</view>
				</block>

			</view>
			<view class="haibao">
				<image :src="itema.image" v-for="(itema,index) in item.orderProductList" mode=""></image>
			</view>
			<view class="fl_ju">
				<text class="time">{{item.createTime}}</text>
				<view class="shu">
					<text class="time">共1件</text> <text class="qian">¥{{item.actualAmount/100}}</text>
				</view>
			</view>
			<view class="fl_en">
			<!-- 	<view class="btn" v-if="item.orderStatus == 3 && item.orderStatus == 4">
					<u-button text="再来一单" size="small" color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view> -->
				<view class="btn"
					v-if="item.orderStatus == 2 || item.orderStatus == 3 || item.orderStatus == 5 || item.orderStatus == 6">
					<u-button text="查看详情" size="small" color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view>
				<!-- 		<view class="btn" style="margin-left: 22rpx;" v-if="item.orderStatus == 2">
					<u-button text="去退款" size="small" color="#AAAAAA"></u-button>
				</view> -->
				<view class="btn" style="margin-left: 22rpx;" v-if="item.orderStatus == 0 || item.orderStatus == 1"
					@click.stop="quxiao(item)">
					<u-button text="取消订单" size="small" color="#AAAAAA"></u-button>
				</view>
				<view class="btn" style="margin-left: 22rpx;" v-if="item.orderStatus == 0 || item.orderStatus == 1"
					@click.stop="fukuan(item)">
					<u-button text="去付款" size="small" color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view>
			</view>
		</view>
		<u-empty mode="order" textSize="30" iconSize="50" width="300rpx" height="300rpx" v-if="list.length==0"
			icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
		<u-modal :show="show" :title="title" @confirm="confirm" @cancel="cancel" :content='content' showCancelButton></u-modal>
	</view>
</template>

<script>
	import {
		orderList,
		orderUnifiedorder,
		orderCancel
	} from '@/api/url.js'

	export default {
		data() {
			return {
				show: false,
				title: '取消订单',
				content: '确认取消订单？',
				status: [{
						value: 0,
						title: '待支付'
					}, {
						value: 1,
						title: '待支付'
					},
					{
						value: 2,
						title: '已支付(派单中)'
					}, {
						value: 3,
						title: '已取消'
					}, {
						value: 4,
						title: '已完成'
					}, {
						value: 5,
						title: '退款中'
					}, {
						value: 6,
						title: '已退款'
					}
				],
				list1: [{
					name: '全部订单',
				}, {
					name: '自提订单',
				}, {
					name: '外卖订单'
				}],
				current: 0,
				token: uni.getStorageSync("token"),
				list: [],
				form: {
					pickupMethod: '',
					pageSize:100,
					orderByColumn:'id'
				},
				ddid: 0
			}
		},
		onLoad(options) {


		},
		onReachBottom() {
			console.log('触底了')
			// this.form.pageNum = this.form.pageNum + 1;
			// this.kgList()
		},
		onShow() {
			if (uni.getStorageSync('index')) {
				this.current = uni.getStorageSync('index')
				this.form.pickupMethod = this.current - 1
			} else {
				this.current = 0
				this.form.pickupMethod = ''
			}
			this.ddList()
		},
		onHide() {
			this.current = 0
			uni.removeStorageSync('index')
		},
		methods: {
			// 取消操作
			cancel() {
				this.show = false
			},
			// 确认取消
			confirm() {
				var that = this
				orderCancel({
					id: that.ddid
				}, that.token).then(res => {
					console.log(res)
					uni.showToast({
						title: '支付成功~',
						icon: 'success',
					})
					that.ddList()
					that.show = false
				})
			},
			// 取消订单弹框
			quxiao(e) {
				this.show = true
				this.ddid = e.id
			},
			// 订单详情
			details(e) {
				uni.navigateTo({
					url: '/pages/sold/details?id=' + e
				})
			},
			// 去付款
			fukuan(e) {
				console.log(e.id)
				var that = this
				orderUnifiedorder({
					orderId: e.id
				}, that.token).then(res => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay', // 支付方式为微信支付
						timeStamp: res.data.response.timeStamp, // 支付签名时间戳
						nonceStr: res.data.response.nonceStr, // 支付签名随机串
						package: res.data.response.package, // 支付签名包
						signType: 'MD5', // 支付签名方式
						paySign: res.data.response.paySign, // 支付签名
						success: function(res) {
							uni.showToast({
								title: '支付成功~',
								icon: 'success',
							})
							that.ddList()
						},
						fail: function(err) {
							console.log('支付失败：', err);
							uni.showToast({
								title: '支付失败',
								icon: 'error',
							})
							that.ddList()
						}
					});
				})
			},
			// 订单列表
			ddList() {
				orderList(this.form, this.token).then(res => {
					console.log(res)
					this.list = res.data.rows
				})
			},
			// 切换状态
			click(item) {
				console.log('item', item);
				if (item.index == 0) { //全部
					this.form.pickupMethod = ''
				} else if (item.index == 1) { //自提
					this.form.pickupMethod = 0
				} else { //外卖
					this.form.pickupMethod = 1
				}
				this.ddList()
			}
		}
	}
</script>
<style lang="scss">
	page {
		padding-bottom: 20rpx;
	}

	.one {
		.staer {
			font-size: 24rpx;
			color: #FF4A4A;
			margin-right: 20rpx;
		}

		.bianhao {
			color: #090909;
			font-size: 24rpx;
		}

		.type {
			color: #AAAAAA;
			font-size: 26rpx;
		}

		.type2 {
			color: #3AA3FF;
			font-size: 26rpx;
		}
	}

	.haibao {
		width: 150rpx;
		height: 150rpx;

		image {
			width: 100%;
			height: 100%;
		}

		margin: 15rpx 0;
	}

	.time {
		color: #AAAAAA;
		font-size: 24rpx;
	}

	.qian {
		color: #FF4A4A;
		font-size: 30rpx;
	}

	.btn {
		width: 200rpx;
		margin-top: 13rpx;

	}
</style>